<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			ul li {
				list-style: none;
				color: #cbd2d7;
			}
		</style>
	</head>
	<body>
			<input type="text" id="txt"  />
			<input type="button" id="btn" value="搜索"  />
		<ul id="oul">
			
		</ul>
	</body>
	<script>
		/*
		var oTxt = document.getElementById("txt");
		var oBtn = document.getElementById("btn");
		//给输入框加键盘事件
		oTxt.onkeyup = function(){
		var sc = document.createElement("script");
		sc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + oTxt.value + "^&sugmode=2^&json=1^&p=3^&sid=22832_22162_1446_21091_22918_22158^&req=2^&bs=aaa^&pbs=aaa^&csor=3^&cb=fn";
		document.getElementsByTagName("head")[0].appendChild(sc);
		};
		
		//利用回调函数，从接口获取属性
		function fn(str){
			//console.log(str.s);
			var oUl = document.getElementById("oul");
			oul.innerHTML = "";
			for(var i = 0 ; i < str.s.length; i ++ ){
				var li = document.createElement("li");
				li.innerHTML = str.s[i];
				oul.appendChild(li);
			}
		}
		*/
		
		//获取元素
		var oTxt = document.getElementById("txt");
		var oBtn = document.getElementById("btn");
		var oli = document.getElementsByTagName("li");
		
		//给输入框添加onkeyup事件
		oTxt.onkeyup = function(){
			var sc = document.createElement("script");
			sc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + oTxt.value + "^&sugmode=2^&json=1^&p=3^&sid=22832_22162_1446_21091_22918_22158^&req=2^&bs=aaa^&pbs=aaa^&csor=3^&cb=fn";
			document.getElementsByTagName("head")[0].appendChild(sc);
		};
		//利用回调函数，获取端口返回的属性
		function fn(str){
			//console.log(str.s)
			for(var i = 0; i < str.s.length; i ++){
				var li = document.createElement("li");
				li.innerHTML = str.s[i];
				oul.appendChild(li);
				li.onmouseover = function(){
					this.style.color = "pink";
				}
				li.onmouseout = function(){
					this.style.color = "";
				}
			}
		}
		

	</script>
</html>
